<template>
	<xn-form-container
		:title="formData.id ? '编辑模拟' : '增加模拟'"
		:width="900"
		v-model:open="open"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules">
			<a-form-item label="名称：" name="name">
				<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
			</a-form-item>
			<a-form-item label="结果的最大值：" name="resultMax">
				<a-input v-model:value="formData.resultMax" placeholder="请输入结果的最大值" allow-clear />
			</a-form-item>
			<a-form-item label="结果的最小值：" name="resultMin">
				<a-input v-model:value="formData.resultMin" placeholder="请输入结果的最小值" allow-clear />
			</a-form-item>
			<a-form-item label="正确概率：" name="correctOdds">
				{{ formData.correctOdds }}
			</a-form-item>

			<a-form-item label="参数：" name="params">
				<a-button type="primary" @click="addParams">
					<template #icon><plus-outlined /></template>
					添加
				</a-button>

				<a-table ref="tableRef" :columns="columns" :data-source="formData.params" bordered :pagination="false">
					<template #bodyCell="{ column, record, index }">
						<template v-if="column.dataIndex === 'paramKey'">
							<a-input v-model:value="record.paramKey" />
						</template>

						<template v-if="column.dataIndex === 'type'">
							<a-select v-model:value="record.type">
								<a-select-option key="1" label="1">变量</a-select-option>
								<a-select-option key="2" label="2">常量</a-select-option>
							</a-select>
						</template>
						<template v-if="column.dataIndex === 'distributionType'">
							<a-select v-model:value="record.distributionType">
								<a-select-option value="0">无</a-select-option>
								<a-select-option value="1">正态分布</a-select-option>
							</a-select>
						</template>
						<template v-if="column.dataIndex === 'meanValue'">
							<a-input-number v-model:value="record.meanValue" :min="0" :step="0.001" />
						</template>
						<template v-if="column.dataIndex === 'sdValue'">
							<a-input-number v-model:value="record.sdValue" :min="0" :step="0.001" />
						</template>
						<template v-if="column.dataIndex === 'action'">
							<a-space>
								<a-button type="link" danger size="small" @click="delParams(index)">删除</a-button>
							</a-space>
						</template>
					</template>
				</a-table>
			</a-form-item>

			<a-form-item label="计算公式：" name="formula">
				<a-input v-model:value="formData.formula" placeholder="请输入计算公式" allow-clear />
			</a-form-item>

			<a-form-item label="模拟次数：" name="simulateNum">
				<a-input-number v-model:value="formData.simulateNum" placeholder="请输入模拟次数" allow-clear />
			</a-form-item>

			<a-button type="primary" @click="startSimulate"> 开始模拟 </a-button>

			<a-card :bordered="false" v-if="formData.logList">
				<a-table ref="tableRef" :columns="logColumns" :data-source="formData.logList" bordered>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'action'">
							<a-space>
								<a @click="openView(record.id)">详细</a>
							</a-space>
						</template>
					</template>
				</a-table>
			</a-card>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>

	<log-view ref="logViewRef"></log-view>
</template>

<script setup name="monteSimulateForm">
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import monteSimulateApi from '@/api/monte/monteSimulateApi'
	import { message } from 'ant-design-vue'
	import logView from './logView.vue'

	// 抽屉状态
	const open = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	const logViewRef = ref()
	const tableRef = ref()

	const logColumns = [
		{
			title: '正确数量',
			dataIndex: 'trueNum'
		},
		{
			title: '模拟数量',
			dataIndex: 'simulateNum'
		},
		{
			title: '时间',
			dataIndex: 'createTime'
		},
		{
			title: '操作',
			dataIndex: 'action'
		}
	]

	const columns = [
		{
			title: 'key',
			dataIndex: 'paramKey'
		},
		{
			title: '类型',
			dataIndex: 'type'
		},
		{
			title: '分布类型',
			dataIndex: 'distributionType'
		},
		{
			title: '均值',
			dataIndex: 'meanValue'
		},
		{
			title: '平方差值',
			dataIndex: 'sdValue'
		},
		{
			title: '操作',
			dataIndex: 'action'
		}
	]

	const openView = (logId) => {
		logViewRef.value.onOpen(logId)
	}

	const startSimulate = () => {
		const formDataParam = cloneDeep(formData.value)
		monteSimulateApi.startTask(formDataParam).then(() => {
			loadData(formDataParam.id)
			message.success('处理成功')
		})
	}

	const delParams = (index) => {
		formData.value.params.splice(index, 1)
	}

	const addParams = () => {
		formData.value.params.push({
			type: '1',
			distributionType: '1'
		})
	}

	// 打开抽屉
	const onOpen = (record) => {
		open.value = true
		if (record) {
			loadData(record.id)
		} else {
			formData.value.params = []
		}
	}

	const loadData = (id) => {
		monteSimulateApi.monteSimulateDetail({ id: id }).then((data) => {
			formData.value = data
		})
	}

	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		formData.value = {}
		open.value = false
	}
	// 默认要校验的
	const formRules = {
		name: [required('请输入名称')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				const formDataParam = cloneDeep(formData.value)
				monteSimulateApi
					.monteSimulateSubmitForm(formDataParam, formDataParam.id)
					.then(() => {
						onClose()
						emit('successful')
					})
					.finally(() => {
						submitLoading.value = false
					})
			})
			.catch(() => {})
	}
	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
